﻿<template>
    <div>
        <el-form label-width="150px" :model="AddTicketrecordDB" :rules="rules" ref="AddUsageRecordDB_refs">
            <el-row>
                <el-col :span="10" :offset="1">
                    <el-form-item label="汽车品牌" prop="CarId">
                        <el-select placeholder="汽车品牌" v-model="AddTicketrecordDB.CarId" filterable style="width:100%">
                            <el-option :value="0" label="汽车品牌"></el-option>
                            <el-option v-for="(v,k) in AllVehicle" :value="v.Id" :data-userid="v.Id" :label="v.CareName" v-text="v.CareName" />
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="10" :offset="1">
                    <el-form-item label="添加类型" prop="UserId"  >
                        <el-select v-model="AddTicketrecordDB.Maintenance" filterable required  @change="TypeselectTionchange"   style="width:100%">
                            <el-option :value="0" label="全部">--全部--</el-option>
                            <el-option :value="1" label="保养">--保养--</el-option>
                            <el-option :value="2" label="保险">--保险--</el-option>
                            <el-option :value="4" label="年检">--年检--</el-option>
                            <el-option :value="8" label="维修">--维修--</el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <div :style="bxdiv">
                <el-row>
                    <el-col :span="10" :offset="1">
                        <el-form-item label="客户选择" prop="CarId">
                            <el-select placeholder="客户选择" v-model="AddTicketrecordDB.CustomerId" filterable style="width:100%">
                                <el-option :value="0" label="请选择客户"></el-option>
                                <el-option v-for="(v,k) in AllCustomer" :value="v.Id" :data-userid="v.Id" :label="v.CustomerName" v-text="v.CustomerName" />
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="10" :offset="1">
                        <el-form-item  :label="bxlabel" >
                            <el-input v-model="AddTicketrecordDB.Details"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>


            <el-row>
                <el-col :span="10" :offset="1">
                    <el-form-item label="联系方式(电话)" prop="CarId">
                        <el-input v-model="AddTicketrecordDB.Contact"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="10" :offset="1">
                    <el-form-item label="经办人" prop="UserId">
                        <el-select placeholder="请选择经办人" filterable v-model="AddTicketrecordDB.AgentId"    style="width:100%">
                            <el-option :value="0" label="请选择经办人"></el-option>
                            <el-option v-for="v in $store.state.AllUsers" v-if="v.InternshipState!=8" :label="v.UserName" :value="v.Id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="10" :offset="1">
                    <el-form-item label="日期" prop="PurchaseDate">
                        <el-date-picker v-model="AddTicketrecordDB.UpkeepDate"
                                        class="wmax"
                                        style=" width: 100%;"
                                        type="date"
                                        placeholder="日期">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="10" :offset="1">
                    <el-form-item label="申请人" prop="UserId">
                        <el-select placeholder="请选择申请人" filterable v-model="AddTicketrecordDB.ApplicantId"    style="width:100%">
                            <el-option :value="0" label="请选择申请人"></el-option>
                            <el-option v-for="v in $store.state.AllUsers" v-if="v.InternshipState!=8" :label="v.UserName" :value="v.Id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="10" :offset="1">
                    <el-form-item label="费用" prop="Price">
                        <el-input v-model="AddTicketrecordDB.Price"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10" :offset="1">
                    <el-form-item label="车辆里程" prop="Note">
                        <el-input v-model="AddTicketrecordDB.Note"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>


            <el-row>
                <el-col :span="10" :offset="1">
                    <el-form-item label="请选择项目" prop="CareName">
                        <el-select placeholder="请选择项目" filterable v-model="AddTicketrecordDB.ProjectId" style="width:100%">
                            <el-option :value="0" label="请选择项目">请选择项目</el-option>     
                            <el-option :value="-2" label="其他">其他</el-option>
                            <el-option v-for="v in AllProject" :label="v.ProjectName" :value="v.Id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="10" :offset="1">
                    <h2>
                        上传图片信息
                    </h2>
                    <el-form-item label="上传图片信息" prop="PostLevel">
                        <UploadFileF ref="AnotherData"
                                     :multiple="false"
                                     :another-data="AnotherData"
                                     :showfilelist="true"
                                     :upshow="false"
                                     content="上传图片信息"
                                     btnsize="medium"></UploadFileF>
                    </el-form-item>
                </el-col>
            </el-row>


            <el-row>
                <el-col align="center">
                    <el-button type="success" @click="AddTicketrecordDBSave">立即提交</el-button>
                    <el-button type="success" @click="AddTicketrecordDBreset">重置</el-button>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>
<script>


    import UploadFileF from "../../UploadFileF";

    import * as publicjs from "/public/Scriput/Public"
    export default {
        name: "AddTicketrecord",
        components: {
            UploadFileF,
        },
        props: {
            AllProject: {
                type: Array,
                required: true
            },
            AllVehicle: {
                type: Array,
                required: true
            },
            AllCustomer: {
                type: Array,
                required: true
            }

        },
        data() {
            return {
                bxdiv: {
                    display: "none"
                },
                bxlabel: "保养项目",
                AddUsageRecordDB: {

                },
                rules: {
                    name: [
                        { required: true, message: '请输入用户名称', trigger: 'blur' },
                    ],
                    phone: [
                        { required: true, message: '请输入电话号码', trigger: 'blur' },
                        { min: 11, max: 11, message: '请输入正确的电话号码', trigger: 'blur' }
                    ],
                    Email: [
                        { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                        { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                    ]
                },
                //文件上传参数
                AnotherData: {
                    FileType: 64,
                    id: 4,
                    Type: 0,
                    Single: false,
                },
                AddTicketrecordDB: {},


            }
        },
        created() {
        },
        methods: {
            AddTicketrecordDBSave() {
                let loadding = this.openLoading();
                this.$http.post("VehicleManagement/AddTicketRecordInsert", { AddticketRecord: this.AddTicketrecordDB })
                    .then(res => {
                        loadding.close();
                        if (res.data.bit) {
                            if (this.$refs['AnotherData'].fileList.length > 0) {
                                this.AnotherData.Type = res.data.Id;
                                this.$refs['AnotherData'].submitUpload()
                            }
                            this.$message.success("数据添加成功")
                            this.$parent.$parent.AddTicketrecordShow = false;
                            this.$parent.$parent.GettableDB();
                        } else {
                            this.$message.error("数据添加失败")
                        }

                    });
            },
            AddTicketrecordDBreset() {
                this.$refs["AddUsageRecordDB_refs"].resetFields();
            },


            TypeselectTionchange() {
                let number = this.AddTicketrecordDB.TypeselectTion;
                console.log(number);
                if (number == 1 || number == 8) {
                    if (number == 1)
                        this.bxlabel = "保养项目";
                    else
                        this.bxlabel = "维修项目";
                    this.bxdiv.display = "block";
                } else {
                    this.bxdiv.display = "none";
                }
            },
        },
    }
</script>
<style>
    .wmax {
        width: 100%;
    }

    .newinput {
        position: absolute;
        z-index: 2;
        width: 80%;
        border-right: 0px;
    }
</style>
